<?php
echo $this->Html->script(array('jquery.form',
								'display_errors',
								'common',
								'placeholder',
								'jquery.ae.image.resize',
								'http://maps.googleapis.com/maps/api/js?sensor=false&libraries=places',
								'https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.min.js',
								), false);
?>

<?php echo $this->Html->css(array('base/jquery.ui.all.css')); ?>
<script type="text/javascript">
$(document).ready(function() {
	//init_ajax_forms(); //Initialize forms containing ajaxForm class
	initialize();
	//init_uplodify();
	//$( ".thumb" ).aeImageResize({ height: 148, width: 148 });
	
	//Preventing form submittion on destination autocomplete selection via Enter key
	$('#MarkerName').keypress(function(e){
		if ( e.which == 13 ) {
			return false;
		}
	});
	$("#output").dialog();
	$('#GuideAddForm').customAjaxForm('<?php echo $this->webroot; ?>venues/add/');

});
</script>
<script type="text/javascript">
var map;
var marker;
var latLng;
var locationSelected=false;
function initialize() {
	var mapOptions = {
		center: new google.maps.LatLng(0, 0),
		zoom: 0,
		mapTypeId: google.maps.MapTypeId.ROADMAP,
	};
	var map = new google.maps.Map(document.getElementById('map_canvas'), mapOptions);
	var MarkerNameInput = document.getElementById('MarkerName');
	var autocomplete = new google.maps.places.Autocomplete(MarkerNameInput);
	autocomplete.bindTo('bounds', map);
	
	var marker = new google.maps.Marker({
		map: map,
		animation: google.maps.Animation.DROP,
		draggable:true,
	});
	
	google.maps.event.addListener(autocomplete, 'place_changed', function() {
		locationSelected=true;
		var place = autocomplete.getPlace();
		console.log(place);
		
		if (place.geometry.viewport) {
			map.fitBounds(place.geometry.viewport);
		} else {
			map.setCenter(place.geometry.location);
			map.setZoom(17);  // Why 17? Because it looks good.
		}
		
		/*var image = new google.maps.MarkerImage(
			'http://maps.google.com/mapfiles/marker.png',
			null,
			null,
			null,
			new google.maps.Size(20, 34)
		);*/
		//var image = new google.maps.MarkerImage('http://chart.apis.google.com/chart?chst=d_map_spin&chld=0.75|0|FF0000|13|b|A)');
		//marker.setIcon(image);
		marker.setPosition(place.geometry.location);
		
		var address = '';
		if (place.address_components) {
			address = [(place.address_components[0] &&
				place.address_components[0].short_name || ''),
				(place.address_components[1] &&
				place.address_components[1].short_name || ''),
				(place.address_components[2] &&
				place.address_components[2].short_name || '')
			].join(' ');
		}
		//console.log('Address:'+address);
		//console.log('Formatted Address:'+place.formatted_address);
	});
	
	
	$('#MarkerName').blur(function() {
		if(locationSelected==false && $('.pac-container').children().size() > 0) {
			$('.pac-container').show();
		} else {
			$('.pac-container').hide();
		}
	});
}
</script>
<style type="text/css">
#map_canvas {
width:400px;
height:400px;
}
.thumb {
}
</style>
<div id="output">Out Put</div>
<h1 class="page_heading">
  <?php __('Create a Guide'); ?>
</h1>
<ul class="wizard_indicator inset_border">
  <li class="active"><?php echo $this->Html->link(__('Make your guide discoverable', true), '#', array('escape' => false));?></li>
  <li><?php echo $this->Html->link(__('Add venues', true), '#', array('escape' => false));?></li>
  <li><?php echo $this->Html->link(__('Review your guide', true), '#', array('escape' => false));?></li>
  <li><?php echo $this->Html->link(__('Share', true), '#', array('escape' => false));?></li>
</ul>
<?php echo $this->Form->create('Guide', array('type' => 'file', 'class' => 'ajaxForm'));?>
<section class="clearfix">
  <?php 
  	if($this->params['action']=='edit') {
		echo $this->Form->input('id', array('type' => 'hidden'));
	}
	echo $this->Form->input('created_by', array('type' => 'hidden'));
	echo $this->Form->input('marker_id', array('type' => 'hidden'));
  ?>
  <div class="grid_7"> <?php echo $this->Form->input('name', array('div' => 'field', 'class' => 'med required', 'placeholder' => __('Guide name, (e.g. Europe, South Africa, New Jersey)', true))); ?> <?php echo $this->Form->input('description', array('div' => 'field', 'class' => 'med', 'rows' => '4', 'placeholder' => __('Add a description for the guide. Tell us who you intend this guide for (e.g. families vs couple). How long it would take to complete this guide (2 days vs 3 months), what types of venues you have covered (e.g. historical, arty, nature).. etc.', true))); ?> <?php echo $this->Form->input('keywords', array('div' => 'field', 'class' => 'med', 'placeholder' => __('Help other find your guide with keywords (e.g. surfing, beaches, etc)', true), 'after' => ' '.$this->Html->image('/images/tooltip.png', 
												array('alt'=> __('tip_icon', true), 
													'border' => '0', 
													'width' => '15', 
													'height' => '15', 
													'alt' => 'Tooltip', 
													'class' => 'tooltip_indicator', 
													'title' => __('Help other find your guide with keywords (e.g. surfing, beaches, etc)', true),
													))
							)); ?>
    <?php echo $this->Form->input('Marker.name', array('div' => 'field required', 'class' => 'med required', 'placeholder' => __('Add a destination for your trip (e.g. London, Gold Coast, Egypt)', true),'label' => __('Destination', true), 'after' => ' '.$this->Html->image('/images/tooltip.png', 
												array('alt'=> __('tip_icon', true), 
													'border' => '0', 
													'width' => '15', 
													'height' => '15', 
													'class' => 'tooltip_indicator', 
													'title' => __('Add a destination for your trip (e.g. London, Gold Coast, Egypt)', true),
													))
							)); ?> 
  <div id="map_canvas"></div>
  </div>
  <div class="grid_3 tac"> <?php echo $this->Html->image('/images/no_image.jpg', 
  												array('alt'=> __('no_guide_image', true), 
													'border' => '0', 
													//'width' => '148', 
													//'height' => '148',
													'class' => 'thumb',
													'id' => 'guide_pic')); ?>
    <p class="padding20top">
      <!--<button class="button light_w_arrow">Upload Image</button>-->
      <?php echo $this->element('uploader'); ?>
    </p>
  </div>
  <div style="clear:both"></div>
</section>
<div class="wizard_footer"><?php echo $this->Form->button('Add Venues', array('type' => 'submit', 'class' => 'button cyan_w_arrow large')); ?></div>
<?php echo $this->Form->end();?>
<!--<div class="guides form"> 
  <fieldset>
  <legend>
  <?php __('Add Guide'); ?>
  </legend>
  <?php
		echo $this->Form->input('name');
		echo $this->Form->input('description');
		echo $this->Form->input('keywords');
		echo $this->Form->input('destination');
	?>
  </fieldset>
  <?php echo $this->Form->end(__('Submit', true));?> </div>
<div class="actions">
  <h3>
    <?php __('Actions'); ?>
  </h3>
  <ul>
    <li><?php echo $this->Html->link(__('List Guides', true), array('action' => 'index'));?></li>
    <li><?php echo $this->Html->link(__('List Markers', true), array('controller' => 'markers', 'action' => 'index')); ?> </li>
    <li><?php echo $this->Html->link(__('New Marker', true), array('controller' => 'markers', 'action' => 'add')); ?> </li>
    <li><?php echo $this->Html->link(__('List Privacies', true), array('controller' => 'privacies', 'action' => 'index')); ?> </li>
    <li><?php echo $this->Html->link(__('New Privacy', true), array('controller' => 'privacies', 'action' => 'add')); ?> </li>
    <li><?php echo $this->Html->link(__('List Guide Requests', true), array('controller' => 'guide_requests', 'action' => 'index')); ?> </li>
    <li><?php echo $this->Html->link(__('New Guide Request', true), array('controller' => 'guide_requests', 'action' => 'add')); ?> </li>
    <li><?php echo $this->Html->link(__('List Guide Votes', true), array('controller' => 'guide_votes', 'action' => 'index')); ?> </li>
    <li><?php echo $this->Html->link(__('New Guide Vote', true), array('controller' => 'guide_votes', 'action' => 'add')); ?> </li>
    <li><?php echo $this->Html->link(__('List Favorite Guides', true), array('controller' => 'favorite_guides', 'action' => 'index')); ?> </li>
    <li><?php echo $this->Html->link(__('New Favorite Guide', true), array('controller' => 'favorite_guides', 'action' => 'add')); ?> </li>
    <li><?php echo $this->Html->link(__('List Users', true), array('controller' => 'users', 'action' => 'index')); ?> </li>
    <li><?php echo $this->Html->link(__('New User', true), array('controller' => 'users', 'action' => 'add')); ?> </li>
    <li><?php echo $this->Html->link(__('List Venues', true), array('controller' => 'venues', 'action' => 'index')); ?> </li>
    <li><?php echo $this->Html->link(__('New Venue', true), array('controller' => 'venues', 'action' => 'add')); ?> </li>
  </ul>
</div>
-->
